<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">标签设置</h4>
        </div>
        <div class="modal-body">
            <form class="modalForm form-horizontal" action="{:url('index/Arc/settags')}" method="post">
                <input type="hidden" name="tag_val" class="tag_val" value="2">
                <div class="portlet-body">
                    <div class="navbar navbar-default" role="navigation">
                        <div class="collapse navbar-collapse navbar-ex1-collapse">
                            <ul class="nav navbar-nav">
                                <li class="active tags" data-id="2">
                                    <a href="#" >
                                        添加标签组
                                    </a>
                                </li>
                                <li class="tags" data-id="1">
                                    <a href="#" >
                                        添加标签
                                    </a>
                                </li>
                                <li class="tags" data-id="3">
                                    <a href="#" >
                                        编辑标签
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="tab-pane " id="tab1" style="display: none">
                        <div class="form-group">
                            <label class="col-md-3 control-label">所属标签组</label>
                            <div class="col-md-9">
                                <select name="gtag" class="form-control gtag">
                                    {foreach $tgd as $td}
                                    <option value="{$td.tag_gruop_id}">{$td.tag_group_name}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">上级标签</label>
                            <div class="col-md-9">
                                <select name="ptag" class="form-control ptag">
                                    <option value="0">作为一级标签</option>
                                    {foreach $tds as $t}
                                    <option value="{$t.tag_id}">{$t.tag_name}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">标签名称</label>
                            <div class="col-md-9">
                                <input type="text" name="tag" class="form-control" placeholder="请输入标签名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">排序</label>
                            <div class="col-md-9">
                                <input type="text" value="99" name="otag" class="form-control" placeholder="请输入排序">
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane active" id="tab2">
                        <div class="form-group">
                            <label class="col-md-3 control-label">标签组名称</label>
                            <div class="col-md-9">
                                <input type="text" name="tags" class="form-control" placeholder="请输入标签组名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">排序</label>
                            <div class="col-md-9">
                                <input type="text" value="99" name="otags" class="form-control" placeholder="请输入排序">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">是否单选</label>
                            <div class="col-md-9">
                                <select name="is_only" class="form-control">
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">是否必填</label>
                            <div class="col-md-9">
                                <select name="is_required" class="form-control">
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="btn-pane" id="tab3" style="display: none">
                        <div class="portlet-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-advance table-hover">
                                    <thead>
                                    <tr>
                                        <th>
                                            <i class="fa fa-tags"></i> 标签组
                                        </th>
                                        <th class="hidden-xs">
                                            <i class="fa fa-tag"></i> 一级标签
                                        </th>
                                        <th>
                                            <i class="fa fa-tag"></i> 二级标签
                                        </th>
                                        <th>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody class="tbody" style="text-align: center">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer modalBtn">
            <button type="button" class="btn default model1close" data-dismiss="modal">关闭</button>
            <button type="button" class="btn blue save">保存</button>
        </div>
    </div>
</div>



<div class="modal fade" id="model2" tabindex="-1" role="model2" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close closeBtn" data-dismiss="model2" aria-hidden="true"></button>
                <h4 class="modal-title">编辑标签组</h4>
            </div>
            <div class="modal-body">
                <form class="modal2Form form-horizontal" action="{:url('index/Arc/updateTags')}" method="post">
                    <input type="hidden" class="tagsid" name="tagsid">
                    <div class="form-group">
                        <label class="col-md-3 control-label">标签组名称</label>
                        <div class="col-md-9">
                            <input type="text" name="tags" class="form-control tags" placeholder="请输入标签组名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">排序</label>
                        <div class="col-md-9">
                            <input type="text" value="99" name="otags" class="form-control otags" placeholder="请输入排序">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">是否单选</label>
                        <div class="col-md-9">
                            <select name="is_only" class="form-control is_only">
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">是否必填</label>
                        <div class="col-md-9">
                            <select name="is_required" class="form-control is_required">
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default closeBtn" data-dismiss="modal2">关闭</button>
                <button type="button" class="btn blue saveBtn2">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="model3" tabindex="-1" role="model3" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close closeBtn" data-dismiss="model3" aria-hidden="true"></button>
                <h4 class="modal-title">编辑标签</h4>
            </div>
            <div class="modal-body">
                <form class="modal3Form form-horizontal" action="{:url('index/Arc/updateTag')}" method="post">
                    <input type="hidden" class="tagid" name="tagid">
                    <div class="form-group">
                        <label class="col-md-3 control-label">标签名称</label>
                        <div class="col-md-9">
                            <input type="text" name="tag" class="form-control tag" placeholder="请输入标签名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">排序</label>
                        <div class="col-md-9">
                            <input type="text" value="99" name="otag" class="form-control otag" placeholder="请输入排序">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default closeBtn" data-dismiss="modal2">关闭</button>
                <button type="button" class="btn blue saveBtn3">保存</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="model4" tabindex="-1" role="model4" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">

    </div>
</div>
<div class="modal fade" id="model5" tabindex="-1" role="model5" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">删除文件</h4>
            </div>
            <div class="modal-body">
                您确认删除 <span style="color: green" class="showtxt"></span> ？
            </div>
            <form class="modal5Form form-horizontal" action="{:url('index/Arc/deleteTag')}" method="post">
                <input type="hidden" name="tag_type" class="tag_type"  value="">
                <input type="hidden" name="tag_val" class="tag_val"  value="">
            </form>
            <div class="modal-footer">
                <button type="button" class="btn default closeBtn" data-dismiss="modal5">关闭</button>
                <button type="button" class="btn blue saveBtn5">保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    dt().modalSave(false);
    $(function () {
        App.init();
        $('.tags').click(function () {
            var id = $(this).data('id');
            if(id == 1){
                $('#tab1').show();
                $('#tab2').hide();
                $('#tab3').hide();
                $('#tab4').hide();
                $('.save').show();
            }else if(id ==2){
                $('#tab2').show();
                $('#tab1').hide();
                $('#tab3').hide();
                $('#tab4').hide();
                $('.save').show();
            }else if(id ==3){
                getTagTree();
                $('#tab2').hide();
                $('#tab1').hide();
                $('#tab3').show();
                $('#tab4').hide();
                $('.save').hide();
            }else if(id ==4){
                $('#tab2').hide();
                $('#tab1').hide();
                $('#tab3').hide();
                $('#tab4').show();
                $('.save').show();
            }
            $('.tags').removeClass('active');
            $(this).addClass('active');
            $('.tag_val').val(id);
            return false;
        });
        $('.gtag').change(function () {
            var id = $(this).val();
            var html = '<option value="0">作为一级标签</option>';
            $.ajax({
                url:'{:url("index/Arc/getTags")}',
                data:{id:id},
                type:'post',
                dataType:'json',
                success:function (e) {
                    if(e.code == 1){
                        $('.ptag').html(html);
                        for(var i =0;i<e.data.length;i++){
                            $('.ptag').append('<option value="'+e.data[i]['tag_id']+'">'+e.data[i]['tag_name']+'</option>')
                        }
                    }else{
                        $('.ptag').html(html);
                    }
                }
            });
            return false;
        });
        $('.closeBtn').click(function () {
            $('#model2').modal('hide');
            $('#model3').modal('hide');
            $('#model4').modal('hide');
            $('#model5').modal('hide');
        });
        $('.saveBtn2').click(function () {
            var form = $('.modal2Form');
            $.ajax({
                url:form.attr('action'),
                type:form.attr('method'),
                data:form.serialize(),
                dataType:'json',
                success:function (e) {
                    if(e.code == 1){
                        $('#model2').modal('hide');
                        var html =  '<div class="alert alert-success alert-dismissable">' +
                            '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
                            '<strong>'+e.msg+'</strong> '+
                            '</div>';
                        $('#model4 .modal-dialog').html(html);
                        $('#model4').modal('show');
                        setTimeout(function () {
                            $('#model4 .modal-dialog').html('');
                            $('#model4').modal('hide');
                        },2000);
                        getTagTree();
                    }else{
                        $('#model2').modal('hide');
                        var html =  '<div class="alert alert-danger alert-dismissable">' +
                            '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
                            '<strong>'+e.msg+'</strong> '+
                            '</div>';
                        $('#model4 .modal-dialog').html(html);
                        $('#model4').modal('show');
                        setTimeout(function () {
                            $('#model4 .modal-dialog').html('');
                            $('#model4').modal('hide');
                        },2000);
                    }
                }
            });
        });

        $('.saveBtn3').click(function () {
            var form = $('.modal3Form');
            $.ajax({
                url:form.attr('action'),
                type:form.attr('method'),
                data:form.serialize(),
                dataType:'json',
                success:function (e) {
                    if(e.code == 1){
                        $('#model3').modal('hide');
                        var html =  '<div class="alert alert-success alert-dismissable">' +
                            '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
                            '<strong>'+e.msg+'</strong> '+
                            '</div>';
                        $('#model4 .modal-dialog').html(html);
                        $('#model4').modal('show');
                        setTimeout(function () {
                            $('#model4 .modal-dialog').html('');
                            $('#model4').modal('hide');
                        },2000);
                        getTagTree();
                    }else{
                        $('#model3').modal('hide');
                        var html =  '<div class="alert alert-danger alert-dismissable">' +
                            '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
                            '<strong>'+e.msg+'</strong> '+
                            '</div>';
                        $('#model4 .modal-dialog').html(html);
                        $('#model4').modal('show');
                        setTimeout(function () {
                            $('#model4 .modal-dialog').html('');
                            $('#model4').modal('hide');
                        },2000);
                    }
                }
            });
        });

        $('.saveBtn5').click(function () {
            var form = $('.modal5Form');
            $.ajax({
                url:form.attr('action'),
                type:form.attr('method'),
                data:form.serialize(),
                dataType:'json',
                success:function (e) {
                    if(e.code == 1){
                        $('#model5').modal('hide');
                        var html =  '<div class="alert alert-success alert-dismissable">' +
                            '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
                            '<strong>'+e.msg+'</strong> '+
                            '</div>';
                        $('#model4 .modal-dialog').html(html);
                        $('#model4').modal('show');
                        setTimeout(function () {
                            $('#model4 .modal-dialog').html('');
                            $('#model4').modal('hide');
                        },2000);
                        getTagTree();
                    }else{
                        $('#model5').modal('hide');
                        var html =  '<div class="alert alert-danger alert-dismissable">' +
                            '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
                            '<strong>'+e.msg+'</strong> '+
                            '</div>';
                        $('#model4 .modal-dialog').html(html);
                        $('#model4').modal('show');
                        setTimeout(function () {
                            $('#model4 .modal-dialog').html('');
                            $('#model4').modal('hide');
                        },2000);
                    }
                }
            });
        });
    });

    function getTagTree() {
        $.ajax({
            url:'{:url("index/Arc/getTagsTree")}',
            type:'post',
            dataType:'json',
            success:function (e) {
                if(e.code == 1){
                    $('.tbody').html(e.data);
                }
                $('.editBtn').click(function () {
                    var type = $(this).attr('data-type');
                    var id = $(this).attr('data-id');
                    if(type == 1) {
                        var tagname = $(this).attr('data-tagname');
                        var order = $(this).attr('data-order');
                        var only = $(this).attr('data-only');
                        var required = $(this).attr('data-required');
                        $('.tagsid').val(id);
                        $('.tags').val(tagname);
                        $('.otags').val(order);
                        $('.is_only').val(only);
                        $('.is_required').val(required);
                        $('#model2').modal('show');
                    }else{
                        var tagname = $(this).attr('data-tagname');
                        var order = $(this).attr('data-order');
                        $('.tag').val(tagname);
                        $('.otag').val(order);
                        $('.tagid').val(id);
                        $('#model3').modal('show');
                    }
                    return false;
                });
                $('.delBtn').click(function () {
                    var type = $(this).attr('data-type');
                    var id = $(this).attr('data-id');
                    if(type == 1){
                        var tagname = $(this).attr('data-tagname');
                        console.log(tagname);
                        $('.showtxt').html(tagname+' 标签组');
                    }else{
                        var tagname = $(this).attr('data-tagname');
                        $('.showtxt').html(tagname+' 标签');
                    }
                    $('.tag_type').val(type);
                    $('.tag_val').val(id);
                    $('#model5').modal('show');
                    return false;
                });
            }
        });
    }
</script>